<style lang="scss" scoped>
@import '../../css/study-plan.scss';
.not-apply-head{padding: 30px 0 30px 40px;background: #fff;}
.head-title{font-size: 16px;font-weight: bold;padding-bottom: 24px;}
.not-apply-head p{color: #777;padding-bottom: 14px;}
.buy-num{font-size: 26px;color: $mcm}
.all-num span{margin-right: 26px;}
.apply-btn{padding: 14px 60px;font-size: 16px;margin-top: 10px;}
.task-box{margin: 16px 1% 0 0;width: 24%;text-align: center;box-shadow: 0 2px 2px 2px #eee;float: left;}
.task-head{height: 60px;font-size: 16px;background: #f7f9fa;line-height: 60px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.task-body{padding: 50px 0;background: #fff;height: 131px;}
.task-img-box{display: inline-block;width: 80px;height: 80px;border-radius: 100%;background: #f7f9fa;}
.task-img-box img{width: 100%}
.task-body p{margin-top: 30px;color: #666;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;height: 21px;}
.task-foot{height: 60px;line-height: 60px;color: #999;border-top: 1px solid #eee;background: #fff;}
.not-apply-foot{padding: 30px 40px 60px;background: #fff;margin-top: 20px;}
.foot-head{font-size: 18px;font-weight: bold;padding-bottom: 16px;}

/*应用付费资源弹框内容*/
.dialog-big-body-car{border: 1px solid #eee;}
.car-head{padding: 18px 24px;background: #fcfdff}
.check-all{margin-left: 4px;}
.car-body{padding: 18px 24px;border-top: 1px solid #eee;background: #fff;}
.car-body:first-child{border-top: none;}
.car-content{height: 90px;line-height: 90px;text-align: center;}
.car-title{text-align: center;}
.book-info{display:-webkit-box;display: box;}
.avatar-box-car{display: block;margin-right: 12px;width: 64px;height: 90px;}
.avatar-box-car img{width: 100%;height: 100%;}
.author-box{-webkit-box-flex: 1;box-flex: 1;-webkit-flex: 1;flex: 1;}
.book-name{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin-bottom: 30px;padding-top: 8px;}
.author-name{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #999}
.count-box{display: inline-block;}

.count-box-car{display: inline-block;}
.minus-plus-btn{float: left;border:1px solid #aaa;background: #fcfdff;width: 20px;height: 28px;line-height: 28px;cursor: pointer;text-align: center;}
.icon-font{font-size: 6px;}
.book-count{float: left;width: 40px;height: 26px;line-height: 26px;border-left:none;border-right: none; border-top:1px solid #aaa;border-bottom: 1px solid #aaa;text-align: center;outline: none;}
.count-box-car input[type=text]:focus {border-left:none;border-right: none; border-top:1px solid #aaa;border-bottom: 1px solid #aaa;}
.singal-price-box{text-align: center;;padding-top: 12px;}
.singal-price-box1{text-align: center;padding-top: 20px;}
.singal-price-box2{text-align: center;padding-top: 32px;}
.line-box{color: #aaa;}
.line-box span{text-decoration: line-through;}
.car-foot{padding: 20px 20px 15px 64px;border-top: 1px solid #eee;}
.car-foot-main{float: right;margin-top: 2px;}
.resource-num{color: #000;font-weight: bold;padding-right: 10px;}
.old-price{padding-right: 10px;}
.dialog-btn-left{width: 150px;margin: 0 10px 0 -4px;}
.dialog-btn-right{width: 150px;background: $mco;}
</style>

<template>
    <section>
        <div class="not-apply-head">
            <div class="head-title">{{studyBaseData.Title}}</div>
            <p>企业订购数 <span class="buy-num">{{studyBaseData.UsedNum}}</span></p>
            <p class="all-num">
                <span>任务数 {{studyBaseData.TaskNum}}</span>
                <span>资源数 {{studyBaseData.ResourceNum}}</span>
                <span>资源付费数 {{studyBaseData.ResourceFeeNum}}</span>
                <span>试卷 {{studyBaseData.ExamNum}}</span>
                <!--<span>培训 {{studyBaseData.TrainNum}}</span>-->
            </p>
            <p>学习时间 - {{studyBaseData.FinishDays}}天</p>
            <div><el-button type="primary" class="apply-btn" @click="apply">应用</el-button></div>
        </div>
        <ul class="not-apply-middle clearfix">
            <template v-for="one,index in list">
                <li class="task-box" v-show="!one.visible">
                    <div class="task-head">{{one.taskTitle}}</div>
                    <div class="task-body">
                        <div class="task-img-box">
                            <template v-if="one.taskResourceCate&&one.taskResourceCate==1">
                                <img src="../../images/ic-book.png" alt="">
                            </template>
                            <template v-if="one.taskType==2">
                                <img src="../../images/ic-exam.png" alt="">
                            </template>
                            <template v-if="one.taskType==3">
                                <img src="../../images/ic-questionnaire.png" alt="">
                            </template>
                            <template v-if="one.taskResourceCate&&one.taskResourceCate==2">
                                <img src="../../images/ic-curriculum.png" alt="">
                            </template>
                        </div>
                        <p>{{one.taskContentTitle}}</p>
                    </div>
                    <div class="task-foot">任务{{numArr[index]}}</div>
                </li>
            </template>
        </ul>
        <div class="not-apply-foot">
            <div class="foot-head">学习计划简介</div>
            <p v-html="studyBaseData.Abstract"></p>
        </div>

        <el-dialog
                :title="dialogBigCar.title"
                :visible.sync="dialogBigCar.centerDialogVisible"
                width="740px"
                center>
            <div class="dialog-big-body-car">
                <el-row class="car-head">
                    <el-col :span="12"><div class="car-title">资源信息</div></el-col>
                    <el-col :span="6"><div class="car-title">数量</div></el-col>
                    <el-col :span="6"><div class="car-title">单价(元)</div></el-col>
                </el-row>
                <template v-for="one,index in buyCarList">
                    <el-row class="car-body">
                        <el-col :span="2"><div class="car-content"></div></el-col>
                        <el-col :span="10">
                            <div>
                                <div class="book-info">
                                    <div class="avatar-box-car"><img :src="one.resourceCover" alt=""></div>
                                    <div class="author-box">
                                        <div class="book-name">{{one.resourceName}}</div>
                                        <div class="author-name">{{one.author}}</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="car-content">
                                <div class="count-box">
                                    <span>{{buyCarNum}}</span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="6" v-show="recommendSourceID!=0">
                            <div class="singal-price-box2">
                                <div><span>{{Number(one.price1).toFixed(2)}}</span></div>
                            </div>
                        </el-col>
                    </el-row>
                    <!--448到474行为推荐学习计划套餐价内容-->
                    <el-row class="car-body">
                        <el-col :span="12"><div class="car-content"></div></el-col>
                        <el-col :span="6">
                            <div class="singal-price-box2">
                                <span class="count-box-car count-box-top clearfix">
                                    <span class="minus-plus-btn" @click="countMinus"><i class="el-icon-minus icon-font"></i></span>
                                    <input type="text" class="book-count" v-model="buyCarNum" @input="countChange">
                                    <span class="minus-plus-btn" @click="countPlus"><i class="el-icon-plus icon-font"></i></span>
                                </span>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="singal-price-box" v-show="recommendBuyCar.PriceNumList?recommendBuyCar.PriceNumList.length==3:false">
                                <div :class="{'line-box':Number(buyCarNum)>Number(recommendBuyCar.num1)}">1-{{recommendBuyCar.num1}}份：<span>{{Number(recommendBuyCar.price1).toFixed(2)}}</span></div>
                                <div :class="{'line-box':Number(buyCarNum)<Number(recommendBuyCar.num1)+1||Number(buyCarNum)>Number(recommendBuyCar.num2)}">{{Number(recommendBuyCar.num1)+1}}-{{recommendBuyCar.num2}}份：<span>{{Number(recommendBuyCar.price2).toFixed(2)}}</span></div>
                                <div :class="{'line-box':Number(buyCarNum)<Number(recommendBuyCar.num3)}">≧{{recommendBuyCar.num3}}份：<span>{{Number(recommendBuyCar.price3).toFixed(2)}}</span></div>
                            </div>
                            <div class="singal-price-box1" v-show="recommendBuyCar.PriceNumList?recommendBuyCar.PriceNumList.length==2:false">
                                <div :class="{'line-box':Number(buyCarNum)>Number(recommendBuyCar.num1)}">1-{{recommendBuyCar.num1}}份：<span>{{Number(recommendBuyCar.price1).toFixed(2)}}</span></div>
                                <div :class="{'line-box':Number(buyCarNum)<Number(recommendBuyCar.num2)}">≧{{recommendBuyCar.num2}}份：<span>{{Number(recommendBuyCar.price2).toFixed(2)}}</span></div>
                            </div>
                            <div class="singal-price-box2" v-show="recommendBuyCar.PriceNumList?recommendBuyCar.PriceNumList.length==1:false">
                                <div><span>{{Number(recommendBuyCar.price1).toFixed(2)}}</span></div>
                            </div>
                        </el-col>
                    </el-row>

                    <div class="car-foot clearfix" v-show="index==buyCarList.length-1">
                        <span class="car-foot-main">
                            资源数：<span class="resource-num">{{buyCarList.length}}</span>商品原价：<span class="old-price">￥{{originalPrice.toFixed(2)}}</span>已结省：<span class="resource-num">￥{{(originalPrice-allMoney).toFixed(2)}}</span>合计：<span class="color-orange fw-bold">￥{{allMoney.toFixed(2)}}</span>
                        </span>
                    </div>
                </template>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="dialog-btn-left" @click="dialogBigCar.centerDialogVisible = false">取 消</el-button>
                <el-button class="dialog-btn-right" type="primary" @click="account">立即支付</el-button>
            </span>
        </el-dialog>
    </section>

</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            commendID:this.$route.query.commendID,
            list:[],
            studyBaseData:{},
            numArr:['一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十','二一','二二','二三','二四','二五','二六','二七','二八','二九','三十','三一','三二','三三','三四','三五','三六','三七','三八','三九'],
            dialogBigCar:{
                centerDialogVisible: false,
                title:'资源付费'
            },
            buyCarNum:0,            //增加的份数，默认为部门人数
            buyCarList:[],          //付费资源列表
            originalPrice:0,         //原价
            allMoney:0,               //合计
            recommendSourceID:0,         //是否是推荐计划 （0不是）
            recommendBuyCar:{},            //推荐计划套餐价格的处理容器
            studyID:0,                   //应用后获取的学习计划ID
            path: [
                {
                    'name':'培训学习',
                    'path':'/study/plan-list'
                },
                {
                    'name':'推荐学习计划',
                    'path':'/study/plan-list'
                },
                {
                    'name': '推荐学习计划详情'
                }
            ]
        }
    },
    mixins: [mixinMethods],
    methods: {
        account(){          //立即支付跳支付页面
            let nowList = [];
            this.buyCarList.forEach(item => {
                nowList.push({ResourceID:item.resourceID,Num:this.buyCarNum})
            })
            axios.post('/com/orders/add', qs.stringify({
                orderGoods:nowList,
                orderType:2,
                relationID:this.studyID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.$router.push({name:'resourceResourcePay',query:{OID:d.data.OrderID,allCount:this.allMoney}})
                }else {
                    this.$message.error(d.msg)
                }
            })
        },
        apply(){
            axios.post('/com/study/useCommendStudy', qs.stringify({
                commendStudyID:this.commendID
            })).then((res) => {
                let dBig = res.data;
                this.studyID = dBig.data.studyID;
                if(dBig.flag == 1){
                    axios.post('/com/study/resPayList', qs.stringify({
                        studyID:dBig.data.studyID
                    })).then((res) => {
                        let d = res.data;
                        if(d.flag == 1){
                            this.buyCarNum = Number(d.data.buyNum)
                            d.data.detail.forEach(item=>{
                                item.ResourcePrice = eval("(" + item.resourcePrice + ")");
                                item.PriceNumList = [];
//                                for(let key in item.ResourcePrice){
//                                    item.PriceNumList.push({price:key,countNum:item.ResourcePrice[key],countBig:item.ResourcePrice[key].split('-')[1]||item.ResourcePrice[key]});
//                                }
                                item.ResourcePrice.forEach((one)=>{
                                    item.PriceNumList.push({price:one.price,countNum:one.num,countBig:String(one.num).split('-')[1]||one.num});
                                })
                                item.allPrice = 0;
                                if(item.PriceNumList.length==3){
                                    item.price1 = item.PriceNumList[0].price;
                                    item.price2 = item.PriceNumList[1].price;
                                    item.price3 = item.PriceNumList[2].price;

                                    item.num1 = Number(item.PriceNumList[0].countBig);
                                    item.num2 = Number(item.PriceNumList[1].countBig);
                                    item.num3 = Number(item.PriceNumList[2].countBig);

                                    item.allPrice = this.buyCarNum<item.num1+1 ? item.allPrice=(this.buyCarNum*item.price1).toFixed(2):this.buyCarNum>item.num3?item.allPrice=(this.buyCarNum*item.price3).toFixed(2):item.allPrice=(this.buyCarNum*item.price2).toFixed(2);
                                }else if(item.PriceNumList.length==2){
                                    item.price1 = item.PriceNumList[0].price;
                                    item.price2 = item.PriceNumList[1].price;

                                    item.num1 = Number(item.PriceNumList[0].countBig);
                                    item.num2 = Number(item.PriceNumList[1].countBig);

                                    item.allPrice = this.buyCarNum<item.num1+1 ? item.allPrice=(this.buyCarNum*item.price1).toFixed(2):item.allPrice=(this.buyCarNum*item.price2).toFixed(2);
                                }else {
                                    item.price1 = item.PriceNumList[0].price;
                                    item.allPrice = (this.buyCarNum*item.price1).toFixed(2)
                                }
                                this.originalPrice += Number((this.buyCarNum*item.price1).toFixed(2))
                                this.allMoney += Number(item.allPrice);
                            })
                            this.buyCarList = d.data.detail;
                            if(d.data.sourceID!=0){
                                this.recommendSourceID = d.data.sourceID;
                                let packagePrice = eval("(" + d.data.packagePrice + ")");
                                let nowResInfo = {};
                                nowResInfo.PriceNumList = [];
//                                for(let key in packagePrice){
//                                    nowResInfo.PriceNumList.push({price:key,countNum:packagePrice[key],countBig:packagePrice[key].split('-')[1]||packagePrice[key]});
//                                }
                                packagePrice.forEach((one)=>{
                                    nowResInfo.PriceNumList.push({price:one.price,countNum:one.num,countBig:String(one.num).split('-')[1]||one.num});
                                })
                                nowResInfo.allPrice = 0;
                                if(nowResInfo.PriceNumList.length==3){
                                    nowResInfo.price1 = nowResInfo.PriceNumList[0].price;
                                    nowResInfo.price2 = nowResInfo.PriceNumList[1].price;
                                    nowResInfo.price3 = nowResInfo.PriceNumList[2].price;

                                    nowResInfo.num1 = Number(nowResInfo.PriceNumList[0].countBig);
                                    nowResInfo.num2 = Number(nowResInfo.PriceNumList[1].countBig);
                                    nowResInfo.num3 = Number(nowResInfo.PriceNumList[2].countBig);

                                    nowResInfo.allPrice = nowResInfo.Num<nowResInfo.num1 ? nowResInfo.allPrice=(nowResInfo.Num*nowResInfo.price1).toFixed(2):nowResInfo.Num>nowResInfo.num3?nowResInfo.allPrice=(nowResInfo.Num*nowResInfo.price3).toFixed(2):nowResInfo.allPrice=(nowResInfo.Num*nowResInfo.price2).toFixed(2);
                                }else if(nowResInfo.PriceNumList.length==2){
                                    nowResInfo.price1 = nowResInfo.PriceNumList[0].price;
                                    nowResInfo.price2 = nowResInfo.PriceNumList[1].price;

                                    nowResInfo.num1 = Number(nowResInfo.PriceNumList[0].countBig);
                                    nowResInfo.num2 = Number(nowResInfo.PriceNumList[1].countBig);

                                    nowResInfo.allPrice = nowResInfo.Num<nowResInfo.num1 ? nowResInfo.allPrice=(nowResInfo.Num*nowResInfo.price1).toFixed(2):nowResInfo.allPrice=(nowResInfo.Num*nowResInfo.price2).toFixed(2);
                                }else {
                                    nowResInfo.price1 = nowResInfo.PriceNumList[0].price;
                                    nowResInfo.allPrice = (nowResInfo.Num*nowResInfo.price1).toFixed(2)
                                }

                                this.recommendBuyCar = nowResInfo;

                                // 推荐计划合计价格
                                if(this.recommendBuyCar.PriceNumList.length==3){
                                    this.allMoney = this.buyCarNum<=this.recommendBuyCar.num1 ? this.allMoney=(this.buyCarNum*this.recommendBuyCar.price1):this.buyCarNum<=this.recommendBuyCar.num2?this.allMoney=(this.buyCarNum*this.recommendBuyCar.price2):this.allMoney=(this.buyCarNum*this.recommendBuyCar.price3);
                                }else if(this.recommendBuyCar.PriceNumList.length==2){
                                    this.allMoney = this.buyCarNum<=this.recommendBuyCar.num1 ? this.allMoney=(this.buyCarNum*this.recommendBuyCar.price1):this.allMoney=(this.buyCarNum*this.recommendBuyCar.price2);
                                }else {
                                    this.allMoney = (this.buyCarNum*this.recommendBuyCar.price1);
                                }
                            }

                        }else {
                            this.$message.error(d.msg)
                        }
                    });

                    this.dialogBigCar.centerDialogVisible = true;
                }else {
                    this.$message.error(d.msg)
                }
            })
        },
        countMinus(){
            if(this.buyCarNum>1){
                this.originalPrice = 0;
                this.allMoney = 0;
                this.buyCarNum--;
                this.buyCarList.forEach(one=>{
                    if(one.PriceNumList.length==3){
                        one.allPrice = this.buyCarNum<=one.num1 ? one.allPrice=(this.buyCarNum*one.price1).toFixed(2):this.buyCarNum<=one.num2?one.allPrice=(this.buyCarNum*one.price2).toFixed(2):one.allPrice=(this.buyCarNum*one.price3).toFixed(2);
                    }else if(one.PriceNumList.length==2){
                        one.allPrice = this.buyCarNum<=one.num1 ? one.allPrice=(this.buyCarNum*one.price1).toFixed(2):one.allPrice=(this.buyCarNum*one.price2).toFixed(2);
                    }else {
                        one.allPrice = (this.buyCarNum*one.price1).toFixed(2);
                    }
                    this.originalPrice += Number((this.buyCarNum*one.price1).toFixed(2))
                    this.allMoney+=Number(one.allPrice);
                })
                if(this.recommendSourceID!=0){
                    if(this.recommendBuyCar.PriceNumList.length==3){
                        this.allMoney = this.buyCarNum<=this.recommendBuyCar.num1 ? this.allMoney=(this.buyCarNum*this.recommendBuyCar.price1):this.buyCarNum<=this.recommendBuyCar.num2?this.allMoney=(this.buyCarNum*this.recommendBuyCar.price2):this.allMoney=(this.buyCarNum*this.recommendBuyCar.price3);
                    }else if(this.recommendBuyCar.PriceNumList.length==2){
                        this.allMoney = this.buyCarNum<=this.recommendBuyCar.num1 ? this.allMoney=(this.buyCarNum*this.recommendBuyCar.price1):this.allMoney=(this.buyCarNum*this.recommendBuyCar.price2);
                    }else {
                        this.allMoney = (this.buyCarNum*this.recommendBuyCar.price1);
                    }
                }
            }
        },
        countPlus(){
            this.originalPrice = 0;
            this.allMoney = 0;
            this.buyCarNum++;
            this.buyCarList.forEach(one=>{
                if(one.PriceNumList.length==3){
                    one.allPrice = this.buyCarNum<=one.num1 ? one.allPrice=(this.buyCarNum*one.price1).toFixed(2):this.buyCarNum<=one.num2?one.allPrice=(this.buyCarNum*one.price2).toFixed(2):one.allPrice=(this.buyCarNum*one.price3).toFixed(2);
                }else if(one.PriceNumList.length==2){
                    one.allPrice = this.buyCarNum<=one.num1 ? one.allPrice=(this.buyCarNum*one.price1).toFixed(2):one.allPrice=(this.buyCarNum*one.price2).toFixed(2);
                }else {
                    one.allPrice = (this.buyCarNum*one.price1).toFixed(2);
                }
                this.originalPrice += Number((this.buyCarNum*one.price1).toFixed(2))
                this.allMoney+=Number(one.allPrice);
            })
            if(this.recommendSourceID!=0){
                if(this.recommendBuyCar.PriceNumList.length==3){
                    this.allMoney = this.buyCarNum<=this.recommendBuyCar.num1 ? this.allMoney=(this.buyCarNum*this.recommendBuyCar.price1):this.buyCarNum<=this.recommendBuyCar.num2?this.allMoney=(this.buyCarNum*this.recommendBuyCar.price2):this.allMoney=(this.buyCarNum*this.recommendBuyCar.price3);
                }else if(this.recommendBuyCar.PriceNumList.length==2){
                    this.allMoney = this.buyCarNum<=this.recommendBuyCar.num1 ? this.allMoney=(this.buyCarNum*this.recommendBuyCar.price1):this.allMoney=(this.buyCarNum*this.recommendBuyCar.price2);
                }else {
                    this.allMoney = (this.buyCarNum*this.recommendBuyCar.price1);
                }
            }
        },
        countChange(){
            this.originalPrice = 0;
            this.allMoney = 0;
            if(Number(this.buyCarNum)<1){
                this.buyCarNum = 1;
            }
            this.buyCarList.forEach(one=>{
                if(one.PriceNumList.length==3){
                    one.allPrice = this.buyCarNum<=one.num1 ? one.allPrice=(this.buyCarNum*one.price1).toFixed(2):this.buyCarNum<=one.num2?one.allPrice=(this.buyCarNum*one.price2).toFixed(2):one.allPrice=(this.buyCarNum*one.price3).toFixed(2);
                }else if(one.PriceNumList.length==2){
                    one.allPrice = this.buyCarNum<=one.num1 ? one.allPrice=(this.buyCarNum*one.price1).toFixed(2):one.allPrice=(this.buyCarNum*one.price2).toFixed(2);
                }else {
                    one.allPrice = (this.buyCarNum*one.price1).toFixed(2);
                }
                this.originalPrice += Number((this.buyCarNum*one.price1).toFixed(2))
                this.allMoney+=Number(one.allPrice);
            })
            if(this.recommendSourceID!=0){
                if(this.recommendBuyCar.PriceNumList.length==3){
                    this.allMoney = this.buyCarNum<=this.recommendBuyCar.num1 ? this.allMoney=(this.buyCarNum*this.recommendBuyCar.price1):this.buyCarNum<=this.recommendBuyCar.num2?this.allMoney=(this.buyCarNum*this.recommendBuyCar.price2):this.allMoney=(this.buyCarNum*this.recommendBuyCar.price3);
                }else if(this.recommendBuyCar.PriceNumList.length==2){
                    this.allMoney = this.buyCarNum<=this.recommendBuyCar.num1 ? this.allMoney=(this.buyCarNum*this.recommendBuyCar.price1):this.allMoney=(this.buyCarNum*this.recommendBuyCar.price2);
                }else {
                    this.allMoney = (this.buyCarNum*this.recommendBuyCar.price1);
                }
            }
        },
    },
    mounted: function(){
        this.$store.commit('setPath', this.path)
        axios.post('/com/study/commendStudyInfo', qs.stringify({
            commendStudyID:this.commendID
        })).then((res) => {
            var d = res.data;
            if(d.flag == 1){
                this.studyBaseData = d.data.studyBaseData;
                this.list = d.data.taskData;
            }else {
                this.$message.error(d.msg)
            }
        })
    }
}


</script>
